<div ng-module="homepageModule" ng-controller="RechercheController as RC" class="container-fluid">

    <div class="bloc-intro">
        <!-- bloc video -->
        <div id="galerie">
            <div style="position: absolute; height: 100%; width: 100%;">
                <img id="image-home" src="/img/bg.jpg">
            </div>
        </div>
        <div id="zone-centrale" class="text-center">
            <div class="va-container">
                <div class="intro-titre va-middle">
                    <h1 id="phrase">1001 TREKS.com</h1>
                    <div id="phrases" class="col-sm-12 col-center">
                        <div>Comparez les offres de nombreuses agences à la fois.</div>
                        <div>Trouvez votre séjour de randonnée plus rapidement.</div>
                    </div>
                    <div class="recherche-form">
                        <div class="col-md-12">
                            <form name="rechercheForm" action="/r" method="post">
                                <div class="form-container">
                                    <div class="row resultats-lignes">
                                        <div class="col-md-11 col-sm-12 col-xs-12 vcenter">
                                            <div class="input-container inline-block">
                                                <div class="inline-block col-md-3 col-sm-4 col-xs-6 no-padding">
                                                    <multi-select
                                                        id="filtrePays"
                                                        default-label="Pays"    
                                                        input-model="RC.RechercheCl.filtrePays"    
                                                        button-label="libellePays"
                                                        item-label="libellePays"
                                                        tick-property="estSelect"
                                                        max-labels="1"
                                                        helper-elements=""
                                                        orientation="horizontal"
                                                        on-item-click="RC.msFiltrePaysChange( data )"
                                                    ></multi-select>
                                                </div><!--
                                                --><div class="inline-block col-md-3 col-sm-4 hidden-xs no-padding">
                                                    <multi-select
                                                        id="filtreRegions"
                                                        default-label="Régions"
                                                        input-model="RC.RechercheCl.filtreRegions"    
                                                        button-label="libelleRegions"
                                                        item-label="libelleRegions"
                                                        tick-property="estSelect"
                                                        max-labels="1"
                                                        helper-elements=""
                                                        orientation="horizontal"
                                                        group-property="paysGroup"
                                                        disable-property="checkboxDisabled"
                                                    ></multi-select>
                                                </div><!--
                                                --><div class="inline-block col-md-3 col-sm-4 col-xs-6 no-padding">
                                                    <multi-select
                                                        default-label="Activités"
                                                        input-model="RC.RechercheCl.filtreActivites"    
                                                        button-label="libelleAS"
                                                        item-label="libelleAS"
                                                        tick-property="estSelect"
                                                        max-labels="1"
                                                        helper-elements=""
                                                        orientation="horizontal"
                                                    ></multi-select>
                                                </div><!--
                                                --><div class="inline-block col-md-3 hidden-sm hidden-xs no-padding">
                                                    <multi-select
                                                        default-label="Thèmatiques"
                                                        input-model="RC.RechercheCl.filtreThematiques"    
                                                        button-label="themeLibelle"
                                                        item-label="themeLibelle"
                                                        tick-property="estSelect"
                                                        max-labels="1"
                                                        helper-elements=""
                                                        orientation="horizontal"
                                                    ></multi-select>
                                                </div>

                                            </div><!-- 
                                            --><button ng-click="RC.lancerLaRecherche();" class="btn btn-primary" type="button">Rechercher</button>
                                        </div>
                                        

                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- thématiques Ajax -->
<div ng-module="homepageModule" ng-controller="HomeController as H" class="home-page-responsive">

    <div id="infos-container" class="row no-margin">
        <div class="col-md-12">

            <div id="bloc-titre" class="text-center">
                <h2> Nos thèmes </h2>
                <p> Découvrez nos séjours répartis par thèmes</p>
            </div>

            <div id="resumeSejour" class="row">
                <div ng-class="{ 'col-md-4 col-sm-6': H.tuileLarge.indexOf(key) == -1, 'col-md-8 col-sm-12': H.tuileLarge.indexOf(key) > -1 }" class="fadeInDown tuile-container" ng-repeat="(key, theme) in H.Home.thematiques">
                    
                    <div class="tuile-element" ng-style="{ 'background-image' : 'url(http://pilote.zf2randos:8080/img/galerie/sejour__20__/plage-main.jpg)' }">

                    </div>

                </div>
            </div>

        </div>
    </div>

</div>


